<!-- 59 组件 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="TabViewFutureHold"
     :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('valid_required2'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="select-width"
              @change="changeShopId"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_cstId')" name="cstId" prop="cstId"  :rules="{
              required: true,
              message: $t('valid_required2'),
              trigger: 'blur',
            }">
           <a-input v-model:value="queryForm.cstId"  :placeholder="$t('common_pleaseEnter1')"  allow-clear />
          </a-form-item>
    </t-query-form>
       <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_glassList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
     <div class="page-wrap-table">
    <t-table :data="list.table">
      <t-column min-width="100" field="slot" :title="$t('T9_slot')" />
      <t-column min-width="100" field="shopId" :title="$t('T9_shopId')" />
      <t-column min-width="100" field="glassId" :title="$t('T9_glassId')" />
      <t-column min-width="100" field="bareGlassName" :title="$t('T9_bareGlassName')" />
      <t-column min-width="100" field="denseBoxId" :title="$t('T9_denseBoxId')" />
      <t-column min-width="100" field="creatTime" :title="$t('T9_creatTime')" />
      <t-column min-width="100" field="futureActionType" :title="$t('T9_futureActionType')" />
      <t-column min-width="100" field="futureActionFlowName" :title="$t('T9_futureActionFlowName')" />
      <t-column min-width="100" field="reasonDescription" :title="$t('T9_reasonDescription')" />
      <t-column min-width="100" field="eventUser" :title="$t('T9_eventUser')" />
      <t-column min-width="100" field="eventTime" :title="$t('T9_eventTime')" />
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="operation" :title="$t('T9_operation')" />
      <t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
      <t-column min-width="100" field="groupId" :title="$t('T9_groupId')" />
      <t-column min-width="100" field="glassGrade" :title="$t('T9_glassGrade')" />
      <t-column min-width="100" field="panelGrades" :title="$t('T9_panelGrades')" />
      <t-column min-width="100" field="productState" :title="$t('T9_productState')" />
      <t-column min-width="100" field="glassHoldState" :title="$t('T9_glassHoldState')" />
      <t-column min-width="100" field="lastEventName" :title="$t('T9_lastEventName')" />
      <t-column min-width="100" field="lastEventTime" :title="$t('T9_lastEventTime')" />
      <t-column min-width="100" field="lastEventUser" :title="$t('T9_lastEventUser')" />
      <t-column min-width="100" field="lastComment" :title="$t('T9_lastComment')" />
      <t-column min-width="100" field="specialComment" :title="$t('T9_specialComment')" />
    </t-table>
     </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'TabViewFutureHold',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        options: {
        },
        shopIdArr: [],
        queryForm: {
          shopId: 'ARRAY',
          cstId: undefined
        }
      }
    },
    computed: {

    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.queryForm.eqpId = undefined
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80004' } }])
        }
      }
    },
    created() {
      this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '80004' } }])
      this.getShopId()
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      getList() {
        const obj = {
          dtoName: 'CstListByMachineDTO',
          queryId: 'GetThroughputByMachine',
          shopId: this.queryForm.shopId,
          version: '80001',
          menuName: 'passGlassByMachine',
          usage: 'queryCstList'
        }
        // return
        api.getList(obj).then((res) => {
          this.table = res
        })
      },
      getShopId() {
        const params = {
        }
        api.getShopId(params).then((res) => {
          this.shopIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.select-width {
  width: 150px;
}
</style>
